<style lang="scss" scoped>
.table-outline {
  background-color: #ffffff;
  padding: 5px 10px;
}
.pda-table {
  //兼容pda
  max-height: 80vh;
  overflow: auto;
}
</style>
<template>
  <div class="table-outline" :class="G_IsMobile ? 'pda-table' : ''" v-if="show">
    <table-search
      :show="config.search"
      :queryFormItem="queryFormItem"
      :collapseFormItem="collapseFormItem"
      :data="filter"
      @handleSearch="handleSearch"
      @handleReset="handleReset"
    ></table-search>
    <table-tools
      :tableSize="tableSize"
      :tableFullscreen="tableFullscreen"
      :columns="columns"
      :selection="selection"
      :config="{
        addButton: config.addButton,
        batchDeleteButton: config.batchDeleteButton,
        downloadIcon: config.downloadIcon,
        uploadIcon: config.uploadIcon,
        uploadUrl: config.uploadUrl,
        tableSizeIcon: config.tableSizeIcon,
        fullscreenIcon: config.fullscreenIcon,
        refreshIcon: config.refreshIcon,
        columnSettingIcon: config.columnSettingIcon,
        
      }"
      @handleChangeTableSize="handleChangeTableSize"
      @handleFullscreen="handleFullscreen"
      @handleRefresh="handleRefresh"
      @handleCreate="handleCreate"
      @handleDeleteMultiple="handleDeleteMultiple"
      @handleDownload="handleDownload"
      @handleUpload="handleUpload"
      @changeColumnShow="changeColumnShow"
    ></table-tools>
    <h3>{{tableTitle}}</h3>
    <table-basic
      ref="table"
      :size="tableSize"
      :loading="loading"
      :data="data"
      :columns="columns"
      :additionalAction="additionalAction"
      :btnShowFun="btnShowFun"
      :config="{
        height:height,
        action: config.action,
        additionalAction: config.additionalAction,
        checkColumnDisabled:config.checkColumnDisabled,
      }"
      :style="tableStyle"
      :rowbgc="rowbgc"
      @handleClick="handleClick"
      @handleDbClick="handleDbClick"
      @handleSortChange="handleSortChange"
      @handleSelect="handleSelect"
      @handleSelectCancel="handleSelectCancel"
      @handleSelectAll="handleSelectAll"
      @handleClearSelect="handleClearSelect"
      @handleEdit="handleEdit"
      @handleDelete="handleDelete"
      @handleDetail="handleDetail"
    ></table-basic>
    <table-navigation
      v-if="config.navigation == undefined || config.navigation == true"
      :pageSizeOpts="pageSizeOpts"
      :pageNavigation="pageNavigation"
      @handleChangePage="handleChangePage"
      @handleChangePageSize="handleChangePageSize"
    ></table-navigation>
    <slot></slot>
    <!--  测试 开始 -->
    <!--      <model-editor v-if="drawer.show" :data="modelData"  :model-type="'entity'" :drawer="drawer" ></model-editor>-->
    <!--  测试 结束 -->
  </div>
</template>

<script>
import TableBasic from "./parts/table-basic";
import TableNavigation from "./parts/table-navigation";
import TableTools from "./parts/table-tools";
import TableSearch from "./parts/table-search";
export default {
  name: "cfg-table",
  components: { TableSearch, TableTools, TableBasic, TableNavigation },
  data() {
    return {
      height:null,
      show: true,
      tableSize: "default",
      tableFullscreen: false,
      selection: [],
      filter: {},
      modelData: {},
      drawer: {
        default: () => {
          return {
            show: false,
            type: "read", // edit || read || new
          };
        },
      },
    };
  },
  props: {
    config: {
      default: () => {
        return {
          /*search:true,
          addButton:true,
          batchDeleteButton:true,
          downloadIcon:true,
          uploadIcon:true,
          uploadUrl:'/',
          tableSizeIcon:true,
          fullscreenIcon:true,
          refreshIcon:true,
          columnSettingIcon:true,
          action:true,
          additionalAction:true*/
        };
      },
    },
    loading: {
      default: () => {
        return false;
      },
    },
    tableStyle: {
      default: () => {
        return {};
      },
    },
    tableTitle:{
      default: () => {
        return '';
      }
    },
    data: {
      default: () => {
        return [
          {
            type: "abc",
            className: "abc",
            version: "abc",
            published: "abc",
            createTime: "abc",
            updateTime: "abc",
          },
          {
            type: "abc",
            className: "abc",
            version: "abc",
            published: "abc",
            createTime: "abc",
            updateTime: "abc",
          },
        ];
      },
    },
    columns: {
      default: () => {
        return [
          /*{
            key: 'type',
            title: '所属类型',
            minWidth: 100,
            align: 'center',
            show: true
          },
          {
            key: 'className',
            title: '模型类名',
            minWidth: 100,
            align: 'center',
            show: true
          },
          {
            key: 'version',
            title: '版本号',
            minWidth: 100,
            align: 'center',
            show: true,
          },
          {
            key: 'published',
            title: '是否发布',
            minWidth: 100,
            align: 'center',
            show: true
          },
          {
            key: 'createTime',
            title: '创建时间',
            minWidth: 60,
            align: 'center',
            show: true,
          },
          {
            key: 'updateTime',
            title: '更新时间',
            minWidth: 100,
            align: 'center',
            show: true,
          },*/
        ];
      },
    },
    additionalAction: {
      default: () => {
        return {
          /*key: 'additionalAction',
          title: 'additionalAction',
          slot: 'additionalAction',
          width: 200,
          fixed:'right',
          align: 'center',
          show: true,
          buttons:[
              {title: 'abc',color:'red', event: (row, index) => console.log(row)},
              {title: 'abc2', event: (row, index) => console.log(row)}
              ]*/
        };
      },
    },
    pageSizeOpts: {
      default: () => {
        return [10, 30, 50, 100];
      },
    },
    pageNavigation: {
      default: () => {
        return { total: 0, pageSize: 10, pageNumber: 1 };
      },
    },
    queryFormItem: {
      default: () => {
        return [
          /*{title:'abc1',key:'abc1',config:{type:'preText',prepend:'abc_'}},
            {title:'abc2',key:'abc2',config:{type:'text'}},
            {title:'abc3',key:'abc3',config:{type:'text'}},
            {title:'abc4',key:'abc4',config:{type:'text'}},
            {title:'abc5',key:'abc5',config:{type:'text'}},
            {title:'abc6',key:'abc6',config:{type:'text'}},
            {title:'abc7',key:'abc7',config:{type:'text'}},
            {title:'abc',key:'any',config:{type:'select'}},*/
        ];
      },
    },
    collapseFormItem: {
      default: () => {
        return [
          /*{title:'abc1',key:'any1',config:{type:'select'}},
          {title:'abc2',key:'any1',config:{type:'select'}},*/
        ];
      },
    },
    btnShowFun: {
      default: () => {
        return function () {
          return true;
        };
      },
    },
    rowbgc: {
      default: () => {
        return "red";
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      if(this.config.autoHeight){
        const obs = new ResizeObserver((entries) => {
        if(this.config.navigation == undefined || this.config.navigation == true){
          this.height = entries[0].contentRect.height-138;
        }else{
          this.height = entries[0].contentRect.height-100;
        }
      });
      obs.observe(this.$el);
      }else{
        this.height = null;
      }
    });
  },
  methods: {
    handleChangePage(page) {
      this.pageNavigation.pageNumber = page;
      this.$emit("loadPage", this.pageNavigation, this.filter);
    },
    // 切换每页条数
    handleChangePageSize(size) {
      this.pageNavigation.pageNumber = 1;
      this.pageNavigation.pageSize = size;
      this.$emit("loadPage", this.pageNavigation, this.filter);
    },
    handleEdit(row, index) {
      this.$emit("handleEdit", row, index);
    },
    handleDelete(row, index) {
      this.$emit("handleDelete", row, index);
    },
    handleDetail(row, index) {
      this.$emit("handleDetail", row, index);
    },
    handleClick(row, index) {
      this.$emit("handleClick", row, index);
    },
    handleDbClick(row, index) {
      this.$emit("handleDbClick", row, index);
    },
    handleSortChange(column, key, order) {},
    handleSelect(selection, row) {
      this.$emit("handleSelect", selection);
      this.selection = selection;
    },
    handleSelectCancel(selection, row) {
      this.$emit("handleSelect", selection);
      this.selection = selection;
    },
    handleSelectAll(selection) {
      this.$emit("handleSelect", selection);
      this.selection = selection;
    },
    handleClearSelect(selection) {
      this.$emit("handleSelect", selection);
      this.selection = selection;
    },

    handleChangeTableSize(size) {
      this.tableSize = size;
    },
    // 表格全屏
    handleFullscreen() {
      this.tableFullscreen = this.G_Fullscreen(this.tableFullscreen, this.$el);
    },
    handleRefresh() {
      this.show = false;
      this.$nextTick(() => {
        this.show = true;
      });
    },
    handleDownload() {
      // this.$refs.table.download();
      this.G_Export(
        "The original data",
        this.columns.filter((item) => item.show === true),
        this.data
      );
    },
    handleUpload(file) {
      this.G_Upload(file, (res) => {
        this.data = res.data;
      });
    },
    handleCreate() {
      this.$emit("handleCreate");
    },
    handleDeleteMultiple() {
      this.$emit("handleDeleteMultiple", this.selection);
    },
    handleSearch() {
      // console.log(this.filter)
      this.$emit("handleSearch", this.filter);
    },
    handleReset() {
      this.filter = {};
      this.$emit("handleReset");
    },
    changeColumnShow(index) {
      this.columns[index].show = !this.columns[index].show;
      //解决列设置中显隐字段不好使
      this.$refs.table.setFinalColumn();
    },
  },
};
</script>
